<template>
    
    项目名称：<input type="text" v-model="Iname" />
    项目总金额：<input type="text" v-model="MinIbudget" /> ——
    <input type="text" v-model="MaxIbudget" />
    <button class="btn btn-success" @click="PageLoad('F')">查询</button>
    <button class="btn btn-danger">批量删除</button>
    <table class="table table-bordered">
        <thead>
            <tr style="background-color: cyan;">
                <th>
                    <input type="checkbox" />
                </th>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资项目总金额</th>
                <th>已投资金额</th>
                <th>剩余投资金额</th>
                <th>投资次数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="itme in info">
                <td>
                    <input type="checkbox" />
                </td>
                <td>{{ itme.I_Id }}</td>
                <td>{{ itme.I_Name }}</td>
                <td>{{ itme.I_Budget }}</td>
                <td>{{ itme.I_Receive }}</td>
                <td>{{ itme.I_Residue }}</td>
                <td>{{ itme.I_Number }}</td>
                <td>
                    <slot :id="itme.I_Id">
                      
                    </slot>
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        数据共{{ pageInfo.totalCount }}条，每页{{ pageInfo.pageSize }}条，当前第{{ pageInfo.pageIndext }}/{{ pageInfo.pageCount }}页
        <a href="#" @click="PageLoad('F')">首页</a> |
        <a href="#" @click="PageLoad('P')">上一页</a>|
        <a href="#" @click="PageLoad('N')">下一页</a>|
        <a href="#" @click="PageLoad('E')">尾页</a>

        <select v-model="Csize" @change="ChangeSize">
            <option value="1">1条/页</option>
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
        </select>
        跳转到第
        <input type="text" v-model="Nindex" style="width: 40px;" />
        页
        <button class="btn btn-success" @click="TakeInfo">跳转</button>
    </span>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'

import { onMounted, ref } from 'vue';
//引入axios
import axios from 'axios';
//
//import { useRouter } from 'vue-router';

//创建路由操作对象
//const router = useRouter();
//创建响应式数据
const info = ref([
    {
        I_Id: 0,
        I_Name: "",
        I_Budget: 0,
        I_Receive: 0,
        I_Residue: 0,
        I_Number: 0
    }
]);
//代表投资项目名称
const Iname = ref("");
//最少投资金额
const MinIbudget = ref("");
//最多投资金额
const MaxIbudget = ref("");
//创建响应式数据
const pageInfo = ref({
    pageSize: 2,
    pageIndext: 1,
    totalCount: 0,
    pageCount: 0
})

const Csize = ref(2);
const Nindex = ref("");

//创建生命周期函数钩
onMounted(() => {
    //初始化页面
    loadData();
})


//加载数据
const loadData = () => {
    //发送请求，加载数据
    axios.get("https://localhost:44387/api/Invests/ShowInvestInfo", {
        params: {
            Iname: Iname.value,
            MinIbudget: MinIbudget.value,
            MaxIbudget: MaxIbudget.value,
            pageSize: pageInfo.value.pageSize,
            pageIndext: pageInfo.value.pageIndext
        }
    })
        .then(res => {
            //处理响应数据
            console.log(res.data);
            info.value = res.data.Ilist;
            //设置分页信息
            pageInfo.value.totalCount = res.data.totalCount;
            pageInfo.value.pageCount = res.data.pageCount;
        })
        .catch(error => {
            //处理错误
            console.log(error);
        });
}
//分页
const PageLoad = (choose: string) => {
    switch (choose) {
        case "F":
            pageInfo.value.pageIndext = 1;
            break;
        case "P":
            //当前页索引必须大于1
            if (pageInfo.value.pageIndext > 1) {
                pageInfo.value.pageIndext--;
            }
            else {
                alert("已经是第一页了");
            }
            break;
        case "N":
            //当前页索引必需小于总页数
            if (pageInfo.value.pageIndext < pageInfo.value.pageCount) {
                pageInfo.value.pageIndext++;
            }
            else {
                alert("已经是最后一页了");
            }
            break;
        case "E":
            pageInfo.value.pageIndext = pageInfo.value.pageCount;
            break;
        default:
            break;
    }

    loadData();
}
//改变每页显示条数
const ChangeSize = () => {
    pageInfo.value.pageSize = Csize.value;
    loadData();
}
//跳转页
const TakeInfo = () => {
    var index = Nindex.value;
    if (index == "") {
        alert("跳转页面不能为空");
        return
    }
    //输入内容为数字
    if (isNaN(Number(index))) {
        alert("跳转页面必需为数字");
        return;
    }
    //输入内容必须大于0
    if (Number(index) <= 0) {
        alert("跳转页面必需大于0");
        return;
    }
    //输入内容必须小于等于总页数
    if (Number(index) > pageInfo.value.pageCount) {
        alert("跳转页面不能大于总页数");
        return;
    }
    pageInfo.value.pageIndext = Number(index);
    loadData();
}



</script>
